<!--功能配置新增/编辑-->
<template>
  <div class="app-container-add">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      class="dialogStyleSmall"
      :before-close="cancel"
    >
      <el-form
        ref="addForm"
        class="dialog-form"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="功能标识" prop="functionKey">
              <el-input v-model="formData.functionKey" :rows="3" type="textarea" placeholder="请输入功能标识" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单权限" class="el-tree-wrap" prop="menuId">
              <p class="all-expand">
                <span v-if="AddExpand" @click="unFoldAll()"><i class="el-icon-caret-bottom" />全部展开</span>
                <span v-else @click="closeAll()"><i class="el-icon-caret-top" />全部关闭</span>
              </p>
              <!-- 菜单权限： -->
              <div>
                <el-tree
                  v-if="openOrNot"
                  ref="menu"
                  :data="menuOptions"
                  show-checkbox
                  node-key="menuId"
                  empty-text="加载中，请稍后"
                  :check-strictly="true"
                  :props="defaultPropsMenu"
                  :default-checked-keys="treeSelected"
                  :default-expand-all="defaultExpand"
                  :highlight-current="true"
                  @check="handleChange"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <DialogFooter />
      </div>
    </el-dialog>
  </div>
</template>
<script>
// dialog-footer
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
import { detailFunctionConfig, addFunctionConfig, updateFunctionConfig } from '@/api/system/FunctionConfig'
import { list } from '@/api/enterprise/changeMenus'
export default {
  name: 'Add',
  components: {
    DialogFooter
  },
  data() {
    return {
      /* 菜单树 start*/
      AddExpand: true,
      openOrNot: true,
      defaultExpand: true,
      treeSelected: [], // 选中的菜单树数据
      // 树形菜单数据
      menuOptions: [],
      // 加载树形菜单结构
      defaultPropsMenu: {
        children: 'children',
        label: 'menuName'
      },
      /* 菜单树 end*/
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: { // 新增数据
        functionKey: '', // 功能标识
        menuId: '' // 菜单id
      },
      rules: { // 表单校验
        functionKey: [
          { required: true, message: '功能标识不能为空', trigger: 'blur' }
        ],
        menuId: [
          { required: true, message: '请选择菜单', trigger: 'changge' }
        ]
      }
      /* 新增 end*/
    }
  },
  methods: {
    /** 菜单 start*/
    // 全部展开
    unFoldAll() {
      this.treeSelected = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
      this.AddExpand = false
      this.defaultExpand = true
      this.openOrNot = false
      setTimeout(() => {
        this.openOrNot = true
        this.$nextTick(() => {
          this.$refs.menu.setCheckedKeys(this.treeSelected)
        })
      }, 10)
    },
    // 全部关闭
    closeAll() {
      this.treeSelected = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
      this.AddExpand = true
      this.defaultExpand = false
      this.openOrNot = false
      setTimeout(() => {
        this.openOrNot = true
        this.$nextTick(() => {
          this.$refs.menu.setCheckedKeys(this.treeSelected)
        })
      }, 10)
    },
    // 整个树形菜单加载
    async getMenuTreeData() {
      const { data } = await list()
      this.menuOptions = this.filterData(data)
    },
    // 过滤树形去掉按钮级
    filterData(data) {
      data.map(item => {
        if (item.children) {
          item.children.map(i => {
            if (i.menuType === 'C') {
              delete i.children
            }
          })
        }
      })
      return data
    },
    // 当复选框选中状态改变时
    handleChange(data) {
      this.$refs.menu.setCheckedKeys([]) // 删除所有选中节点
      if (data.menuType === 'C') {
        this.$refs.menu.setCheckedNodes([data]) // 选中已选中节点
        this.treeSelected = [data.menuId]
        this.formData.menuId = data.menuId
      }
    },
    /** 菜单 end*/
    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.emptyAddForm()
      this.getMenuTreeData()
      if (id) {
        this.handleDetail(id)
      }
    },
    // 详情
    async handleDetail(id) {
      const { data } = await detailFunctionConfig(id)
      this.formData = { ...data }
      this.treeSelected = [data.menuId]
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          if (this.formData.id) {
            await updateFunctionConfig(this.formData)
            this.msgSuccess('修改成功')
          } else {
            await addFunctionConfig(this.formData)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.id = ''
      this.treeSelected = []
    }
    /* 新增/编辑弹层 end*/
  }
}
</script>

